<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
<#import "/page/Utils.ftl" as utils>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link href="${base}/theme/global.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${base}/contrib/jquery/jquery-1.2.6.js"></script>

    <link href="${base}/contrib/jquery/datepicker/ui.datepicker.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${base}/contrib/jquery/datepicker/ui.datepicker.js"></script>

    <link href="${base}/contrib/jquery/alerts/jquery.alerts.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${base}/contrib/jquery/alerts/jquery.alerts.js"></script>

    <link href="${base}/contrib/jquery/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${base}/contrib/jquery/fancybox/jquery.fancybox-1.2.1.js"></script>

    <script type="text/javascript" src="${base}/js/tip.js"></script>
    <script type="text/javascript" src="${base}/js/utils.js"></script>
    <script language="javascript" type="text/javascript">
        function position_fixed(el, eltop, elleft) {
            // check is IE6
            if (!window.XMLHttpRequest)
                window.onscroll = function() {
                    el.style.top = (document.documentElement.scrollTop + eltop) + "px";
                    el.style.left = (document.documentElement.scrollLeft + elleft) + "px";
                };
            else {
                el.style.position = "fixed";
            }
        }

        $(function() {
            $("#ShowMenu").fancybox({
                'hideOnContentClick': false
            });

            var mainMenuId = menuId.split("_")[0];

            $("#" + menuId).parent().parent().show();

            $("a").focus(function() {
                this.blur();
            });

            $("a").each(function() {
                if (menuId == this.id) {
                    $(this).attr("className", "Selected");
                    $("#" + menuId.split("_")[0]).attr("className", "Selected");
                    return false;
                }
            });

            var timeout = 0;
            var lastMenu = null;
            $("#mainMenu li").mouseover(function() {
                var mainMenu = this;
                if (lastMenu != this) {
                    clearTimeout(timeout);
                    timeout = setTimeout(function() {
                        $("#mainMenu li").removeAttr("className");
                        $(mainMenu).attr("className", "Selected");
                        $("#sub ul").hide();
                        $("#sub" + mainMenu.id).show();
                        lastMenu = mainMenu;
                    }, 300);
                }
            });

            $("#sub").mouseover(function() {
                clearTimeout(timeout);
                timeout = 0;
                lastMenu = null;
            });

            $("body").mousemove(function(e) {
                if ($("#sub ul:visible a.Selected").length == 0 &&
                        !pointInElement(e.pageX, e.pageY, $("#sub")) &&
                        !pointInElement(e.pageX, e.pageY, $("#mainMenu"))) {

                    $("ul[id^='sub']").hide();
                    $("#" + menuId).parent().parent().show();

                    $("#mainMenu li").removeAttr("className");

                    $("#" + mainMenuId).attr("className", "Selected");
                }
            });
        });

        function syncUser(e) {
            showTip(e, "Sync is running, please wait...");
            $.ajax({
                type: "POST",
                url: "${base}/system!ajaxSyncUser.action",
                dataType :"json",
                success: function(echo) {
                    if (echo.result == true) {
                        showTip(e, "Sync user success！");
                    } else {
                        showTip(e, echo.result);
                    }
                },
                async: false
            });
        }
    </script>
    <title>${systemTitle}</title>
${head}
</head>
<body>
<div class="masthead">
    <a href="#" class="logo">
        <img src="${base}/images/logo.jpg" alt="SynxisAdapter" title="SynxisAdapter"/></a>

    <div style="position:absolute;right:10px;top:10px;color:white">
        <a id="ShowMenu" href="#jumpMenu" style="color:#EEE;font-family:sans-serif;font-size:20px;">JumpTo</a>
    </div>

    <div style="display:none;">
        <div id="jumpMenu">
            <ul>
            <#list navigatorItems as item>
                <li>
                    <a href="${item.url}" title="${item.description}"
                       style="color:#EEE;font-family:sans-serif;font-size:18px;"">${item.name}&nbsp;</a>
                </li>
            </#list>
            </ul>
        </div>
    </div>

    <div class="top_nav">
        <ul class="TabBarLevel1" id="mainMenu">
            <li id="Monitor"><a href="#">Monitor</a></li>
        <#if currentUser.hasRole("ADMIN;")>
            <li id="Settings"><a href="#">SystemSettings</a></li>
        </#if>
        </ul>
    </div>
    <ul class="exit">
        <li>[${currentUser.name}]</li>
        <li><a href="${base}/j_spring_security_logout">Logout</a></li>
    </ul>
    <div id="sub" class="HackBox">
        <ul id="subMonitor" style="display:none">
            <li><a id="Monitor_Log"
                   href="${base}/monitor/transactionlog/query.action">TransactionLog</a>
            </li>
            <li><a id="Monitor_Reservation"
                   href="${base}/monitor/reservation/query.action">Reservation</a>
            </li>
            <li><a id="Monitor_CacheStatistics"
                   href="${base}/monitor/cachestatistics/view.action">CacheStatistics</a>
            </li>
        </ul>
        <ul id="subSettings" style="display:none">
            <li><a id="Settings_User"
                   href="${base}/settings/user/list.action">Privilege</a>
            </li>
            <li><a id="Settings_Hotel"
                   href="${base}/settings/hotel/query.action">Hotel</a>
            </li>
            <li><a id="Settings_Channel"
                   href="${base}/settings/channel/query.action">Channel</a>
            </li>
        </ul>
    </div>
</div>
<div class="page_content">
${body}
</div>
<div class="footer">
    Copyright © 2002-2008 DerbySoft (Shanghai) Co. Ltd all rights reserved. BuildNumber(${buildNumber})
    <br/>
<#if currentUser.hasRole("ADMIN;")>
    <a href="#" onclick="syncUser($(this))">SyncUser</a></li>
</#if>
</div>

</body>
</html>

